<script setup lang="ts">
// defineProps({
//   title: String,
//   rightText: String
// })
withDefaults(
  defineProps<{
    title?: string
    rightText?: string
  }>(),
  {
    title: '优医问诊'
  }
)

// const emits = defineEmits(['click-left'])
const emits = defineEmits<{
  (e: 'click-left'): void
  (e: 'click-right'): void
}>()

const onClickLeft = () => {
  emits('click-left')
}

const onClickRight = () => {
  emits('click-right')
}
</script>

<template>
  <van-nav-bar :title="title" :right-text="rightText" @click-left="onClickLeft" @click-right="onClickRight">
    <template #left>
      <van-icon name="arrow-left" />
    </template>
  </van-nav-bar>
  <!-- <div class="main"></div> -->
</template>

<!-- <style lang="scss">
.van-icon-arrow-left::before {
  color: red;
  font-size: 50px;
}
</style> -->

<style lang="scss" scoped>
// 深度选择器有很多种写法， vue2 3. less sass
// 样式穿透， 在我们这个cp-nav-bar组件里面，要修改van的组件的样式，如果有scoped，就会给下面的类名，加一个属性选择器  .van-nav-bar__text[data-xxx-ssss] 和vant的样式就匹配不到了，就不能修改样式，
:deep() {
  .van-icon-arrow-left::before {
    color: red;
    font-size: 20px;
    font-weight: 600;
  }
  .van-nav-bar {
    &__text {
      // 这个颜色要用主题色， 用css变量，通过var去引入
      color: var(--hm-92-main-clor);
    }
    // &__arrow {
    //   color: red;
    //   font-size: 50px;
    // }
  }
  // .van-nav-bar .van-icon {
  //   color: black !important;
  // }
}
// .van-nav-bar__text {
//   color: red;
// }

// :deep() {
//   .van-nav-bar__text {
//     color: red;
//   }
// }
</style>

<!-- <style lang="scss" scoped>
.main {
  color: blue;
}
</style> -->
